<template>
    <table>
        <colgroup>
            <col style="width: 34%" />
            <col style="width: 19%" />
            <col style="width: 26%" />
            <col style="width: 19%" />
        </colgroup>
        <thead>
            <tr>
                <th>开支科目</th>
                <th>预算经费（元）</th>
                <th>主要用途</th>
                <th>预计使用时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1.业务费</th>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr v-for="(subject, index) in budgets" :key="index">
                <th>{{ subject.BudgetName }}</th>
                <td>{{ subject.BudgetAmount }}</td>
                <td class="text-left">{{ subject.BudgetUsage }}</td>
                <td>{{subject.UseTime!=app.DATE_EMPTY ? dayjs(subject.UseTime).format('YYYY年M月'):'' }}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>预算经费总额</th>
                <td>{{ basicInfo.ApplyAmount }}</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>学校批准经费</th>
                <td>{{ basicInfo.ApprovalAmount < 0 ? '待定' : basicInfo.ApprovalAmount }}</td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</template>

<script setup>
import dayjs from 'dayjs';
import app from "../../../app.ts";
const props = defineProps({
    data: Object,
});

const basicInfo = props.data.basicInfo;
const budgets = props.data.budgets;
console.log(props.data.budgets);
</script>

<style lang="less" scoped>
@import "@/assets/less/paper/doc.less";
</style>